<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style>
			.input-group{
				height: 4rem;
				line-height: 4rem;
				margin: 0 1rem;
				border-bottom: 1px solid #ccc;
			}
			.getcode{
				position: absolute;
				right: 1rem;
				top:1rem;
				height: 2rem;
			}
			.change{
				margin: 2rem 30%;
				width: 40%;
				height: 3rem;
				font-size: 1.2rem;
				font-weight: 600;
				border-radius:1.5rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">密码修改</h1>
		</header>
		<div class="mui-content">
			
		
		<form class="mui-input-group">
			<div class="input-group">
				<input type="text" class="mui-input-clear" placeholder="请输入手机号" id="phone"/>
			</div>
			<button class="mui-btn-blue getcode" type="button"
			 id="getcode">获取验证码</button>
			<div class="input-group">
				<input type="password" class="mui-input-password" placeholder="请输入密码" id="password" />
			</div>
			<div class="input-group">
				<input type="password" class="mui-input-password" placeholder="请确认密码"  id="repassword"/>
			</div>
			<div class="input-group">
				<input type="text" class="mui-input-clear" placeholder="请输入验证码" id="code" />
			</div>
		</form>
		<button type="button" class="mui-btn-blue change" id="change">修改密码</button>
			</div>
		</body>
		<script src="../js/mui.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function () {
			var getcode = document.getElementById("getcode");
				var phone = document.getElementById("phone");
				var password = document.getElementById("password");
				var repassword = document.getElementById("repassword");
				var change = document.getElementById("change");
				//获取验证码
				getcode.addEventListener("tap",function(){
					
					if(!app.checkPhone(phone.value)){
						plus.nativeUI.toast("手机格式错误，请重新输入",{verticalAlign : "top",
						background:"red"});
						return;
					}
					mui.ajax("http://192.168.137.1:8080/user/getcode",{
						data:{phone:phone.value},
						type:"get",
						timeout:10000,
						
						success:function(data){
							mui.toast('发送成功，请注意接收和查看',{ duration:'long', type:'div' });
							changeCode(data.data);
							
						},
						error:function(xhr,type,errorThrown){
							//异常处理；
							console.log(type);
						}
					})
					});	
				//修改密码
				change.addEventListener("tap",function(){
					if(!app.checkPhone(phone.value)){
						plus.nativeUI.toast("手机格式错误，请重新输入",{verticalAlign : "top",
						background:"red"});
						return;
					}if(password.value == null || password.value == ""){
						plus.nativeUI.toast("密码不能为空",{verticalAlign : "top",
						background:"red"});
						return;
					}
					if(code.value == null || code.value == ""){
						plus.nativeUI.toast("验证码不能为空",{verticalAlign : "top",
						background:"red"});
						return;
					}
					mui.ajax("http://192.168.137.1:8080/user/update/0",{
						data:{
							phone:phone.value,
							password:password.value,
							code:code.value
						},
						type:"post",
						timeout:10000,
						dataType:"json",
						success:function(data){
							console.log(JSON.stringify(data));
							if (data.status == 200) {
								mui.toast(data.msg,{duration:'long',type:'div'});
								
								window.location.href="../login.html";
							} else{
								mui.toast("修改失败："+data.msg,{duration:'long',type:'div'});
							}
						},
						error:function(xhr,type,errorThrown){
							mui.toast("修改失败，请重新修改");
							console.log(xhr);
							console.log(type);
							console.log(errorThrown);
						}
					})
				});
			});
			function changeCode(code){
				var clock = 60;
				var btn_code = document.getElementById("getcode");
				codebtn();
			  function codebtn(){
				  if(clock == 0){
					btn_code.disabled = false;
					btn_code.innerHTML = "获取验证码";
					clock = 60;
					return;
				}
				else{
					if(clock == 52){
						mui.toast("您的验证码为："+code,{duration:'long',type:'div'});
					}
					btn_code.disabled = true;
					btn_code.innerHTML = clock+"s后可重新发送";
					clock --;
				}
			  
				  setTimeout(function(){
					  codebtn()
				  },1000);
				}
			}
		</script>
	</body>

</html>
